import React from 'react';
import BackIcon from './BackIcon';
import MenuIcon from './MenuIcon';
import CloudIcon from './CloudIcon';
import SquareIconProps from './SquareIcon';
import CircleIcon from './CircleIcon';
import { Button, Divider, Link } from '@nextui-org/react';
import { useAtom } from 'jotai';
import { testAtom, selectedBtnAtom } from '../atoms';
import { useNavigate } from 'react-router-dom';

const Header: React.FC = () => {
  const navigate = useNavigate();
  const [selectedBtn, setSelectedBtn] = useAtom(selectedBtnAtom);
  const [_1, test ] = useAtom(testAtom);

  return (
    <div className="grid grid-cols-12 gap-4 h-12" style={{minWidth: "1100px"}}>
      <div className="col-span-3 flex items-center">
        <div className="ml-4 h-9 space-x-2 flex items-center">
          <Button isIconOnly color="default" variant="light" aria-label="Back">
            <BackIcon className="text-lg" />
          </Button>
          <Divider orientation="vertical" />
          <Button
            isIconOnly
            color="default"
            variant="light"
            aria-label="Back"
            onClick={() => navigate('/')}
          >
            <MenuIcon className="text-lg" />
          </Button>
          <div className="space-x-2">
            <Link href="/" className="text-default-400 text-sm">
              草稿
            </Link>
            <span className="text-default-400 text-sm">/</span>
            <span className="text-sm">测试</span>
          </div>
          <Button
            isIconOnly
            color="default"
            variant="light"
            aria-label="connect"
          >
            <CloudIcon className="text-xl text-default-400" />
          </Button>
        </div>
      </div>
      <div className="col-span-6 flex items-center">
        <div className="ml-4 h-9 flex items-center">
          <Button
            isIconOnly
            color="default"
            variant={selectedBtn === "rectPen" ? "flat" : "light"}
            aria-label="rectPen"
            onClick={() => {
              setSelectedBtn('rectPen');
            }}
          >
            <SquareIconProps className="text-xl" />
          </Button>
          <Button
            isIconOnly
            color="default"
            variant={selectedBtn === "circlePen" ? "flat" : "light"}
            aria-label="circlePen"
            onClick={() => {
              setSelectedBtn('circlePen');
              console.log(test());
            }}
          >
            <CircleIcon className="text-xl" />
          </Button>
          
        </div>
      </div>
      <div className="col-span-3 flex items-center">123</div>
    </div>
  );
};

export default Header;
